import { Component, OnInit, Input, SimpleChanges } from '@angular/core';
import { TagData } from "../../../../entity/tag-data.model";
import { Farm } from "../../../../entity/farm.model";
import { FarmService } from "../../../../service/farm.service";
import { DatePipe } from "@angular/common";

@Component({
    selector: 'app-farm-echarts',
    templateUrl: './farm-echarts.component.html',
    styleUrls: ['./farm-echarts.component.css'],

})
export class FarmEchartsComponent implements OnInit {

    /**
     * echarts实例对象
     *
     * @private
     * @type {*}
     * @memberof FarmEchartsComponent
     */
    private echartsIntance: any;

    /**
     * 风场名字
     *
     * @memberof FarmEchartsComponent
     */
    @Input()
    farmName: string

    @Input()
    currMeanWindSpeed: TagData;
    @Input()
    currPower: TagData;
    @Input()
    currAGCFeedBackValue: TagData;

    /**
     * 风速
     *
     * @memberof FarmEchartsComponent
     */
    @Input()
    meanWindSpeed: any

    /**
     * 有功功率
     *
     * @memberof FarmEchartsComponent
     */
    @Input()
    power: any

    /**
     * AGC值
     *
     * @memberof FarmEchartsComponent
     */
    @Input()
    AGCFeedBackValue: any

    /**
     * 历史数据集合
     *
     * @memberof FarmEchartsComponent
     */
    @Input()
    historyMeanWindSpeedDates: any[];

    @Input()
    historyPowerDates: any[];

    @Input()
    historyAgcDates: any[];

    /**
     * 预测功率集合
     *
     * @memberof FarmEchartsComponent
     */
    @Input()
    griFPowerDatas: any[];

    private historyMeanWindSpeedSeries: any[] = [];

    private historyPowerSeries: any[] = [];

    private historyAgcSeries: any[] = [];

    /**
     * 昨日风速、昨日功率数据集合
     *
     * @memberof FarmEchartsComponent
     */
    @Input()
    yesterdayWindSpeedDatas: any[];

    @Input()
    yesterdayPowerDatas: any[];

    /**
     * 昨日风速、昨日功率数据集合(图表对应数据集)
     *
     * @memberof FarmEchartsComponent
     */

    private yesterdayWindSpeedSeries: any[] = [];

    private yesterdayPowerSeries: any[] = [];

    private griFPowerSeries: any[];

    /**
     * 公司复选框按钮控制图例
     *
     * @memberof FarmEchartsComponent
     */
    @Input()
    isCheckedMeanWindSpeed: boolean;

    @Input()
    isCheckedPower: boolean;

    @Input()
    isCheckedAgc: boolean;

    @Input()
    isCheckedYestdayWindSpeed: boolean;

    @Input()
    isCheckedYestdayPower: boolean;

    @Input()
    isCheckedGriFPowers: boolean;





    public options: object;
    public currMeanWindSpeedName:string = '';
    public serviceName:string = '';

    constructor(
        private datePipe: DatePipe
    ) {

    }

    ngOnInit() {
        // debugger
        let isTrue = RegExp(/光伏/);

        if(isTrue.test(this.farmName)){
            this.currMeanWindSpeedName='当前辐照值(MJ/㎡)';

        }else{
            this.currMeanWindSpeedName='当前风速(m/s)'

        }

        this.series[0].data = this.historyMeanWindSpeedSeries;

        this.series[1].data = this.historyPowerSeries;
        this.series[2].data = this.historyAgcSeries;

        //加载昨日数据
        this.series[3].data = this.yesterdayPowerSeries;

        this.series[4].data = this.yesterdayWindSpeedSeries;

        //预测功率(在ngOnChanges方法中直接加载)；

        //初始化图表
        this.initOption();

    }

    ngOnChanges(changes: SimpleChanges) {

        if (changes['historyMeanWindSpeedDates'] && changes['historyMeanWindSpeedDates'].currentValue) {
            this.historyMeanWindSpeedSeries.splice(0, this.historyMeanWindSpeedSeries.length);
            this.historyMeanWindSpeedDates.forEach(o => {
                this.historyMeanWindSpeedSeries.push(o);
            });
        }
        if (changes['historyPowerDates'] && changes['historyPowerDates'].currentValue) {
            this.historyPowerSeries.splice(0, this.historyPowerSeries.length);
            this.historyPowerDates.forEach(o => {
                this.historyPowerSeries.push(o);
            });
        }
        if (changes['historyAgcDates'] && changes['historyAgcDates'].currentValue) {
            this.historyAgcSeries.splice(0, this.historyAgcSeries.length);
            this.historyAgcDates.forEach(o => {
                this.historyAgcSeries.push(o)
            });
        }
        if (changes['meanWindSpeed'] && changes['meanWindSpeed'].currentValue) {
            if (this.meanWindSpeed){
                this.historyMeanWindSpeedSeries.push(this.meanWindSpeed);
            }


        }
        if (changes['power'] && changes['power'].currentValue) {
            if (this.power){

                this.historyPowerSeries.push(this.power);
            }
        }
        if (changes['AGCFeedBackValue'] && changes['AGCFeedBackValue'].currentValue) {
            if (this.AGCFeedBackValue)
                this.historyAgcSeries.push(this.AGCFeedBackValue);
        }

        //预测功率
        if (changes['griFPowerDatas']) {
            if (changes['griFPowerDatas'].currentValue && changes['griFPowerDatas'].currentValue.length) {
                this.series[5].data = changes['griFPowerDatas'].currentValue;
            }
        }
        //昨日功率和风速
        if (changes['yesterdayWindSpeedDatas']) {
            if (changes['yesterdayWindSpeedDatas'].currentValue && changes['yesterdayWindSpeedDatas'].currentValue.length)
                this.yesterdayWindSpeedSeries.push(...changes['yesterdayWindSpeedDatas'].currentValue);
                // console.log(this.yesterdayWindSpeedSeries)
        }
        if (changes['yesterdayPowerDatas'] && changes['yesterdayPowerDatas'].currentValue) {
            if (changes['yesterdayPowerDatas'].currentValue && changes['yesterdayPowerDatas'].currentValue.length)
                this.yesterdayPowerSeries.push(...changes['yesterdayPowerDatas'].currentValue);
        }

        //父组件复选框控制图例
        if (changes['isCheckedMeanWindSpeed']) {
            this.windSpeedChecked(this.isCheckedMeanWindSpeed);
        }

        if (changes['isCheckedPower']) {
            this.powerChecked(this.isCheckedPower);
        }

        if (changes['isCheckedAgc']) {
            this.agcChecked(this.isCheckedAgc);
        }

        if (changes['isCheckedYestdayWindSpeed']) {
            this.yestdayWindSpeedChecked(this.isCheckedYestdayWindSpeed);
        }

        if (changes['isCheckedYestdayPower']) {
            this.yestdayPowersChecked(this.isCheckedYestdayPower);
        }

        if (changes['isCheckedGriFPowers']) {
            this.griFPowersChecked(this.isCheckedGriFPowers);
        }

        this.updateEchart();

     }

    private series: any = [
        {
            // name: this.serviceName,
            name: '今日风速/辐照',
            type: 'line',
            smooth: true,
            symbol: 'circle',
            symbolSize: 5,
            yAxisIndex: 1,
            showSymbol: false,
            lineStyle: {
                normal: {
                    width: 1
                }
            },
            itemStyle: {
                normal: {
                    color: '#e9d937',
                    borderColor: 'rgba(137,189,2,0.27)',
                    borderWidth: 12,
                    lineStyle:{
                        color:'#FFFF00'
                    }
                }
            },
            // data:  this.meanWindSpeedDatas        //用初始化ngoninit的数据集合代替
        },
        {
            name: '今日功率',
            type: 'line',
            smooth: true,
            symbol: 'circle',
            symbolSize: 5,
            showSymbol: false,
            lineStyle: {
                normal: {
                    width: 1
                }
            },
            itemStyle: {
                normal: {
                    color: '#1E90FF',
                    borderColor: 'rgba(0,136,212,0.2)',
                    borderWidth: 12,
                    lineStyle:{
                        color:'#1E90FF'
                    }

                }
            },
            // data: this.powerDatas
        },
        {
            name: '当前AGC值',
            type: 'line',
            smooth: true,
            symbol: 'circle',
            symbolSize: 5,
            showSymbol: false,
            lineStyle: {
                normal: {
                    width: 1
                }
            },

            itemStyle: {
                normal: {
                    color: '#008000',
                    borderColor: 'rgba(0,136,212,0.2)',
                    borderWidth: 12,
                    lineStyle:{
                        color:'#008000'
                    }

                }
            },
            // data: this.AGCFeedBackValueDatas

        },
        {
            name: '昨日有功功率',
            type: 'line',
            smooth: true,
            symbol: 'circle',
            symbolSize: 5,
            showSymbol: false,
            xAxisIndex: 1,
            lineStyle: {
                normal: {
                    width: 1
                }
            },
            itemStyle: {
                normal: {
                    color: '#9370DB',
                    borderColor: 'rgba(0,136,212,0.2)',
                    borderWidth: 12,
                    lineStyle:{
                        color:'#9370DB'
                    }

                }
            },
            //data: this.yesterdayPowers
        },
        {
            name: '昨日风速/辐照',
            type: 'line',
            smooth: true,
            symbol: 'circle',
            symbolSize: 5,
            showSymbol: false,
            xAxisIndex: 1,
            yAxisIndex: 1,

            lineStyle: {
                normal: {
                    width: 1
                }
            },

            itemStyle: {
                normal: {
                    color: '#FF1493',
                    borderColor: 'rgba(0,136,212,0.2)',
                    borderWidth: 12,
                    lineStyle:{
                        color:'#FF1493'
                    }
                }
            },
            // data: this.AGCFeedBackValueDatas
        },
        {
            name: '预测功率',
            type: 'line',
            smooth: true,
            symbol: 'circle',
            symbolSize: 5,
            showSymbol: false,
            lineStyle: {
                normal: {
                    width: 1
                }
            },

            itemStyle: {
                normal: {
                    color: '#FF4500',
                    borderColor: 'rgba(0,136,212,0.2)',
                    borderWidth: 12,
                    lineStyle:{
                        color:'#FF4500'
                    }

                }
            },
            // data: this.AGCFeedBackValueDatas
        }
    ]

    windSpeedChecked(check: boolean) {
        this.selected['今日风速/辐照'] = check
        this.updateLenged()
    }

    powerChecked(check: boolean) {
        this.selected.今日功率 = check
        this.updateLenged();
    }

    agcChecked(check: boolean) {
        this.selected.当前AGC值 = check
        this.updateLenged();
    }

    yestdayPowersChecked(check: boolean) {
        this.selected.昨日有功功率 = check;
        this.updateLenged();
    }

    yestdayWindSpeedChecked(check: boolean) {
        this.selected['昨日风速/辐照'] = check
        this.updateLenged();
    }

    griFPowersChecked(check: boolean) {
        this.selected.预测功率 = check;
        this.updateLenged();
    }

    updateLenged() {
        if (this.echartsIntance != null)
            this.echartsIntance.setOption({
                legend: {
                    selected: this.selected
                }
            });
    }

    private selected = {
        '今日风速/辐照': this.isCheckedMeanWindSpeed,
        '今日功率': this.isCheckedPower,
        '当前AGC值': this.isCheckedAgc,
        '昨日有功功率': this.isCheckedYestdayPower,
        '昨日风速/辐照': this.isCheckedYestdayWindSpeed,
        '预测功率': this.isCheckedGriFPowers
    }


    private legend = {
        icon: 'rect',
        itemWidth: 14,
        itemHeight: 5,
        itemGap: 3,
        //data: ['今日风速', '今日功率', '当前AGC值', "昨日有功功率", "昨日风速", '预测功率'],
        //right: '10%',
        textStyle: {
            fontSize: 12,
            color: '#F1F1F3'
        },
        selected: this.selected
    }

    initOption() {

        //let data = [[0, 0], [0, 10], [600, 12], [800, 44], [1200, 23], [2400, 56], [3600, 45], [4000, 78], [5000, 45], [7200, 34], [8000, 44], [13000, 12], [36000, 99], [72000, 60.9]];
        //跟后台协商，需要的数据格式为 第一个为时间，第二个为value
        let pipe = this.datePipe;
        let nowDate = new Date();
        this.options = {
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    lineStyle: {
                        color: '#57617B'
                    }
                },
                // formatter: function (params, ticket, callback) {
                //     let result = pipe.transform(new Date(params[1].data[0]), "HH:mm:ss") + "</br>";
                //     params.forEach((item) => {
                //         result += item.marker + item.seriesName + ":" + item.value[1] + "</br>";
                //     });
                //     return result;
                // }
            },
            legend: this.legend,
            grid: {
                left: '3%',
                right: '2%',
                bottom: '3%',
                top: '5%',
                containLabel: true
            },
            xAxis: [
                {
                    type: 'time',
                    min: new Date(nowDate.getFullYear(), nowDate.getMonth(), nowDate.getDate()),
                    max: new Date(nowDate.getFullYear(), nowDate.getMonth(), nowDate.getDate() + 1),
                    interval: 60000 * 60,
                    boundaryGap: false,
                    axisLine: {
                        lineStyle: {
                            color: '#35789d',
                            width: 2
                        }
                    },
                    axisLabel: {
                        // 该属性的用来定义坐标轴的标签;
                        formatter: function (value, index) {
                            return pipe.transform(new Date(value), "HH:mm");
                        },
                        rotate: 30
                    },
                    splitLine: {
                        show: true,
                        lineStyle: {
                            color: '#1b4268'
                        }
                    },
                    axisTick: {
                        show: false
                    },
                },
                {
                    type: 'time',
                    min: new Date(nowDate.getFullYear(), nowDate.getMonth(), nowDate.getDate() - 1),
                    max: new Date(nowDate.getFullYear(), nowDate.getMonth(), nowDate.getDate()),
                    interval: 60000 * 60,
                    boundaryGap: false,
                    axisLine: {
                        lineStyle: {
                            color: '#57617B'
                        }
                    },
                    show: false,
                    axisLabel: {
                        // 该属性的用来定义坐标轴的标签;
                        formatter: function (value, index) {
                            return pipe.transform(new Date(value), "HH:mm");
                        },
                        rotate: 40
                    },
                    splitLine: {
                        show: false,
                        lineStyle: {
                            color: '#57617B'
                        }
                    },
                }
            ],
            yAxis: [
                {
                    type: 'value',
                    name: '功率：MW',
                    axisLabel: {
                        //也可以像X轴那样定义想要的显示效果
                        formatter: "{value}"
                    },
                    splitLine: {
                        show: true,
                        lineStyle: {
                            color: '#1b4268'
                        }
                    },
                    axisLine: {
                        lineStyle: {
                            color: '#35789d',
                            width: 2
                        }
                    },
                    axisTick: {
                        show: false
                    }
                },
                {
                    type: 'value',
                    name: '风速：m/s',
                    axisLabel: {
                        //也可以像X轴那样定义想要的显示效果
                        formatter: "{value}"
                    },
                    splitLine: {
                        show: true,
                        lineStyle: {
                            color: '#1b4268'
                        }
                    },
                    axisLine: {
                        lineStyle: {
                            color: '#35789d',
                            width: 2
                        }
                    },
                    axisTick: {
                        show: false
                    }
                }
            ],
            series: this.series
        };

    }

    //初始化图表实例
    onChartInit(ec: any) {
        this.echartsIntance = ec;
        this.updateEchart();
    }

    //更新图表数据
    updateEchart() {
        if (this. echartsIntance != null) {
            // console.log(this.options)
            this.echartsIntance.setOption(this.options);
        }
    }

}


// WEBPACK FOOTER //
// ./src/app/module/monitor/farm-load-trend/farm-echarts/farm-echarts.component.ts
